<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select class="filter-item" style="width: 188px" @change="getList" v-model="listQuery.pid" placeholder="所有合作方">
        <el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select class="filter-item" style="width: 130px" @change="getList" v-model="listQuery.user_type" placeholder="所有阶段">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.val" :value="item.id">
        </el-option>
      </el-select>
      <span class="search-title">注册时间</span>
      <el-date-picker
        v-model="regTime"
        type="datetimerange"
        format="yyyy-MM-dd HH:mm"
        placeholder="选择日期时间"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :editable="false"
        @change="changeReg()"
        :picker-options="pickerOptions">
      </el-date-picker>
      <div :class="headerStyle? 'oneLine':'twoLine' ">
        <span class="search-title">最后登录时间</span>
        <el-date-picker
          v-model="logTime"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
          @change="changeLog()"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-input type="text" v-model="listQuery.key_word" @blur="getList" placeholder="请输入姓名/账号/手机号"></el-input>
      </div>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%" max-height="580">
      <el-table-column width="160" align="center" label="编号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column width="220" align="center" label="注册渠道">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="160" align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{scope.row.username}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160" label="手机号">
        <template slot-scope="scope">
          <span v-if="scope.row.phone">{{scope.row.phone}}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.user_type">{{scope.row.user_type}}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="预产期" width="230">
        <template slot-scope="scope">
          <span v-if="scope.row.expected_date !== 0">{{scope.row.expected_date | parseTime('{y}-{m}-{d}')}}</span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="注册时间" width="230">
        <template slot-scope="scope">
          <span>{{scope.row.registered_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="最后登录时间" width="230">
        <template slot-scope="scope">
          <span>{{scope.row.last_login_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="180" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="view" size="mini" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[5,10,20,30, 50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<style scoped>
  .el-time-spinner__wrapper {
    vertical-align: inherit;
  }
  .filter-container .filter-item {
    margin-bottom: 4px;
  }
  .el-input {
    width: 200px;
  }
  .el-dialog {
    width: 40%!important;
  }
  .twoLine {
    display: block;
    margin: 10px 0 20px;
  }
  .oneLine {
    display: inline-block;
  }
</style>

<script>
import { fetchList } from '@/api/customer'
import { getList, stageList } from '@/api/partner'
import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils'

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      screenWidth: document.body.clientWidth,
      timer: false,
      headerStyle: false,
      listQuery: {
        pid: '',
        user_type: '',
        key_word: '',
        registered_S: '',
        registered_E: '',
        lastTime_S: '',
        lastTime_E: '',
        page: 1,
        'per-page': 10
      },
      regTime: '',
      logTime: '',
      temp: {
        id: undefined,
        username: '',
        account: '',
        phone: '',
        status: '',
        created_at: '',
        auth_key: ''
      },
      statusOptions: [],
      groupArr: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改成员信息',
        create: '新增成员'
      },
      downloadLoading: false,
      pickerOptions: {
        disabledDate(time) {
          var d = new Date('2016-12-31')
          return time.getTime() > Date.now() || time.getTime() < d.getTime()
        }
      }
    }
  },
  created() {
    this.getStageList()
    this.getList()
    this.getPartnerList()
  },
  methods: {
    // 获取阶段列表
    getStageList() {
      stageList().then(response => {
        console.log(response.data)
        this.statusOptions = response.data
      })
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data._meta.totalCount
        this.listLoading = false
      })
    },
    getPartnerList() {
      getList({ 'per-page': 999 }).then(response => {
        this.groupArr = response.data.data
        // for (const k in data) {
        //   this.groupArr[k] = data[k]
        // }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery['per-page'] = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        account: '',
        username: '',
        phone: '',
        password: '',
        status: ''
      }
    },
    // 查看成员信息详情
    handleView(row) {
      this.$router.push({ path: '/user/view/' + row.id })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    // 修改注册选择器时间
    changeReg() {
      if (this.regTime !== null) {
        this.listQuery.registered_S = this.regTime[0]
        this.listQuery.registered_E = this.regTime[1]
      }
      this.getList()
    },
    // 修改最后登录选择器时间
    changeLog() {
      if (this.logTime !== null) {
        this.listQuery.lastTime_S = this.logTime[0]
        this.listQuery.lastTime_E = this.logTime[1]
      }
      this.getList()
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        const that = this
        setTimeout(function() {
          console.log(that.screenWidth)
          if (that.screenWidth <= 1700) {
            that.headerStyle = false
          } else {
            that.headerStyle = true
          }
          that.timer = false
        }, 400)
      }
    }
  }
}
</script>
